<script lang="ts" setup>
import {isDark} from '@/utils/is'
import {useAppStore} from '@/store/modules/app'
import {useDesign} from '@/hooks/web/useDesign'
import {CACHE_KEY, useCache} from '@/hooks/web/useCache'
import routerSearch from '@/components/RouterSearch/index.vue'

defineOptions({name: 'APP'})

const {getPrefixCls} = useDesign()
const prefixCls = getPrefixCls('app')
const appStore = useAppStore()
const currentSize = computed(() => appStore.getCurrentSize)
const greyMode = computed(() => appStore.getGreyMode)
const {wsCache} = useCache()

// 根据浏览器当前主题设置系统主题色
const setDefaultTheme = () => {
  let isDarkTheme = wsCache.get(CACHE_KEY.IS_DARK)
  if (isDarkTheme === null) {
    isDarkTheme = isDark()
  }
  appStore.setIsDark(isDarkTheme)
}
setDefaultTheme()
</script>
<template>
  <ConfigGlobal :size="currentSize">
    <RouterView :class="greyMode ? `${prefixCls}-grey-mode` : ''"/>
    <routerSearch/>
  </ConfigGlobal>
</template>
<style lang="scss">
$prefix-cls: #{$namespace}-app;

.size {
  width: 100%;
  height: 100%;
}

.el-popover.el-popper {
  min-width: 90px !important;
  text-align: center;
  padding: 10px 3px;
  background-color: #F0E68C !important;
}

.el-popover.el-popper .el-row:hover{
  background-color: #fff;
  border-radius: 2px;
}

.el-dialog__footer {
  text-align: center;
}

.el-select__selected-item {
  text-align: center;
}

.popoverCloseBtn {
  background-color: gray;
  color: #fff;
  padding: 3px 0;
  border-radius: 5px;
  margin-top: 15px;
}
.popoverCloseBtn:hover {
  cursor: pointer;
  background-color: darkgray;
}
popoverCloseBtn:active{
  transform: translateY(3px);
}

.custom-select .el-input__inner {
  /* 默认颜色 */
  color: #303133;
}

.linkBtn{
  width: 28px;
  cursor: pointer;
}

.linkBtn:active {
  //background-color: #004085;
  transform: translateY(3px);
}

.statusTag{
  cursor: pointer;
}

.priorit1 .el-select__selected-item {
  color: #FF4500 !important;
}



.el-table tr:hover > td {
  background-color: #F0E68C !important;
}

.el-image {
  margin-right: 10px;
  border-radius: 10px;
}


html,
body {
  @extend .size;

  padding: 0 !important;
  margin: 0;
  overflow: hidden;

  #app {
    @extend .size;
  }
}
.#{$prefix-cls}-grey-mode {
  filter: grayscale(100%);
}

.no-border-input {
  border: none;
  /* 如果需要去掉内阴影和轮廓 */
  box-shadow: none;
  outline: none;
}
/* 如果需要去掉下划线边框 */
.no-border-input .el-input__wrapper {
  border-bottom: none;
  box-shadow: none;
}

</style>
